<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>活动列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/index.js"></script>

</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">风采管理</a>
            <a>
              <cite>活动列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="title" placeholder="请输入活动名称" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除
                    </button>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>

                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
                </script>

            </div>
        </div>
    </div>

    <div id="div_test" class="layui-bg-gray" style="width:60%;padding: 30px;display: none; position: absolute;left: 25%; top:100px" >
        <div class="layui-row layui-col-space12">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">审核风采</div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">结果</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="通过|不通过">
                                    <input type="text" id="code" name="id" hidden>
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text" id="desc">
                                <label class="layui-form-label">原因：</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                                    <button type="button" class="layui-btn layui-btn-normal" onclick="disappeare()">关闭</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
</div>
</body>
<script>
    layui.use(['laydate', 'form','table'], function () {
        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;

        table.render({
            elem: '#test'
            , url: '/admin/styleManger?opr=list'
            , toolbar: true
            , title: '风采数据表'
            , id: 'activitytable'
            , cols: [[
                {checkbox: true, fixed: true}
                , {field: 'id', title: 'ID', width: 80, unresize: true, sort: true}
                , {field: 'title', title: '活动名称', width: 150}
                , {field: 'typeName', title: '活动类型', width: 100, sort: true, totalRow: true}
                , {field: 'oName', title: '机构名称', width: 120}
                , {field: 'paths', title: '风采图', width: 220,templet: '#showScreenhost'}
                , {field: 'nickName', title: '上传人', width: 120}
                , {
                    field: 'createTime',
                    title: '上传时间',
                    width: 120,
                    templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm')}}</div>"
                }
                , {field: 'checked', title: '是否审核通过', width: 120, templet: '#checkedTpl'}
                , {field: 'checkedName', title: '审核人', width: 100}
                , {
                    field: 'checkedTime',
                    title: '审核时间',
                    width: 120,
                    templet: "<div>{{layui.util.toDateString(d.checkedTime, 'yyyy-MM-dd HH:mm')}}</div>"
                }
                , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}

            ]]
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 5 页
                , groups: 2//只显示 1 个连续页码

            }
            , response: {
                statusCode: 2000 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data//解析数据列表
                };
            }
        });

        //数据渲染结束
        //监听行工具
        table.on('tool(test)', function (obj) {
            var data = obj.data;
         if (obj.event === 'edit') {
             $("#code").val(data.id);
             operate() ;

            }
        });
        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            if(this.checked==false){
                document.getElementById('desc').style.display = 'block'
            }else {
                document.getElementById('desc').style.display = 'none'
                $("[name='desc']").val("");
            }
        });
        //监听提交
        form.on('submit(demo1)', function (data) {

            var param=  data.field
            var id= $("#code").val();
            param.id=id;
            $.getJSON("/admin/styleManger?opr=check",param, function (data) {
                layer.msg(data)
                // 重新加载页面
                loadData($,id);
                // 清除 未通过原因的文字数据
                $("[name='desc']").val("");
                window.parent.location.reload();
                document.getElementById('div_test').style.display = 'none'

            })
            return false;
        });


        //重新渲染表格数据
        var $ = layui.$, active = {
            reload: function () {
                // 获取条件
                var checked = $('[name="checked"]').val();
                var start = $("#start").val();
                var end = $("#end").val();
                var title = $("#title").val();
                var type = $(".typelist").val();
                //执行重载
                table.reload('activitytable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        startTime: start,
                        endTime: end,
                        checked: checked,
                        title: title,
                        type: type
                    }
                });
            }
        };
        // 按钮触发事件
        $('.layui-card .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });



        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });


    });
</script>

<script type="text/html" id="checkedTpl">
    {{#  if(d.checked == "0"){ }}
    <span style="color: #C9C5C5;">{{ '未审核'}}</span>
    {{#  } else if(d.checked == "1"){ }}
    <span style="color: green;">{{ '审核通过'}}</span>
    {{#  } else if(d.checked == "2") { }}
    <span style="color: red;">{{ '审核未通过'}}</span>
    {{#  } }}
</script>

<script id="showScreenhost" type="text/html">
    {{# var srr=d.paths.split(",");
    for(var j in srr) { srr[j] }}
    <div  style="margin:0 10px; display:inline-block !important; display:inline;  max-width:70px; max-height:50px;">
        <img onclick='show_img(this)' style=" max-width:70px; max-height:50px;" src="{{srr[j]}}" />
    </div>
    {{# } }}
</script>


<script>


    function show_img(t) {
        //页面层
        layer.open({
            type: 1,
            title: '区域图片',
            skin: 'layui-layer-rim', //加上边框
            area: ['80%', '80%'], //宽高 t.width() t.height()
            shadeClose: true, //开启遮罩关闭
            end: function (index, layero) {
                return false;
            },
            content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
        });
    }
    function operate() {
        document.getElementById('div_test').style.display = 'block'
        document.getElementById('desc').style.display = 'none'

        //  setTimeout('disappeare()', 2000)
    }

    function disappeare() {
        document.getElementById('div_test').style.display = 'none'
        window.parent.location.reload();
    }
</script>
</html>